{% extends "base.html" %}
{% from "_when.html" import when_field with context %}
{% block title %}Habits · {{ app_name }}{% endblock %}
{% block body %}
<h1>🎯 Habits <small class="hint">the work your Handler wants to see</small> <a class="gear" href="/settings#habits" title="feeds, defaults, the full editor">⚙</a></h1>
<p class="voice big">“{{ voice }}”</p>

{% if running %}
<section class="card need">
  <h2>⏱ On the clock</h2>
  <p class="bigstat"><span class="hab-elapsed" data-start="{{ running.started }}">{{ (now - running.started)|dur }}</span>
    <small class="hint">{{ running.activity.icon }} {{ running.activity.title }} · since {{ running.started|local('%H:%M') }}</small></p>
  <form class="row" method="post" action="/habits/stop">
    <label>Note <input name="note" placeholder="optional — stays in the log, never on the API"></label>
    <button class="primary">■ Stop and log it</button>
  </form>
  <form method="post" action="/habits/stop" onsubmit="return confirm('Throw this run away? Nothing will be written.')">
    <input type="hidden" name="discard" value="1"><button class="danger small">✕ discard</button>
  </form>
</section>
{% endif %}

<section class="card">
  <h2>Today <small class="hint">one tap logs it{% if habits|selectattr('timed')|list %} · a timed habit logs {{ default_minutes }} min — use the form below for the exact time, or run the timer{% endif %}</small></h2>
  {% if habits %}
  <div class="actions hab-actions">
    {% for h in habits %}{% set a = h.activity %}
    <form method="post" action="/habits/{{ a.slug }}/log" class="action">
      {% if h.timed %}<input type="hidden" name="minutes" value="{{ default_minutes }}">{% endif %}
      <button class="btn act hab {{ 'lit' if h.today else '' }}" style="--c:{{ a.color }}" title="log {{ a.title }} now">
        <span class="ico">{{ a.icon }}</span><span>{{ a.title }}</span>
        {% if h.today %}<em class="pill">{{ 'done' if h.today == 1 else h.today ~ '×' }}</em>{% endif %}
        <small class="hab-sub">
          {%- if h.week %}{{ h.week.n }}/{{ h.week.target }} this week{% elif h.streak %}🔥 {{ h.streak.current }}{{ h.streak.unit }}{% elif h.since is not none %}{{ h.since|dur }} ago{% else %}never yet{% endif -%}
        </small>
      </button>
    </form>
    {% endfor %}
  </div>
  {% else %}
  <p class="hint">Nothing on the board. Add the first one below — it takes a name and a rhythm.</p>
  {% endif %}
</section>

<section class="grid2">
  <div class="card">
    <h2>This week</h2>
    {% if habits %}
    <div class="tblwrap">
    <table class="tbl hboard">
      <tr><th></th>{% for d in ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'] %}<th class="{{ 'today' if habits[0].cells[loop.index0].today }}">{{ d }}</th>{% endfor %}<th>week</th></tr>
      {% for h in habits %}{% set a = h.activity %}
      <tr style="--c:{{ a.color }}">
        <td class="hname">{{ a.icon }} {{ a.title }}</td>
        {% for c in h.cells %}
        <td class="hcell {{ 'today' if c.today }} {{ 'future' if c.future }}">
          {%- if c.n %}<span class="hdot" title="{{ c.n }}{% if c.seconds %} · {{ c.seconds|dur }}{% endif %}">{% if c.seconds %}{{ (c.seconds / 60)|round|int }}<small>m</small>{% else %}●{% endif %}</span>
          {%- elif c.future %}<span class="hfut">·</span>
          {%- else %}<span class="hmiss">·</span>{% endif -%}
        </td>
        {% endfor %}
        <td class="hwk">
          {%- if h.week %}<b class="{{ 'met' if h.week.met else '' }}">{{ h.week.n }}/{{ h.week.target }}</b>{% else %}<b>{{ h.cells|sum(attribute='n') }}</b>{% endif -%}
          {%- if h.week_seconds %} <small>{{ h.week_seconds|dur }}</small>{% endif -%}
          {%- if h.streak and h.streak.current %} <small>🔥{{ h.streak.current }}{{ h.streak.unit }}</small>{% endif -%}
          <span class="badge hv hv-{{ h.verdict.state }}" title="{{ h.verdict.line }}">{{ h.verdict.state|replace('_', ' ') }}</span>
        </td>
      </tr>
      {% endfor %}
    </table>
    </div>
    <p class="hint">Streaks, totals and the colour on the <a href="/calendar">calendar</a> all come from the same matcher, so this board can never disagree with them. The verdict on each row is your Handler's: <em>consistent</em> earns praise and time off the clock, <em>slacking</em> earns a word — and, if you set it, minutes on. <a href="/guide/habits#praise-and-a-talking-to">How it judges →</a></p>
    {% endif %}
  </div>

  <div class="card">
    <h2>Log it properly</h2>
    {% if habits %}
    <form class="row" method="post" action="/habits/log-form">
      <label>Habit
        <select name="slug">{% for h in habits %}<option value="{{ h.activity.slug }}">{{ h.activity.icon }} {{ h.activity.title }}</option>{% endfor %}</select>
      </label>
      <label>Minutes <input type="number" name="minutes" min="0" step="1" placeholder="blank = a check-off"></label>
      <label>Note <input name="note" placeholder="optional"></label>
      <button class="primary">✓ Log it</button>
      {{ when_field('⏱ did it earlier? set when it ENDED') }}
    </form>
    <p class="hint">A log more than two days old still counts — streak, calendar, totals — but earns no XP. Rewards are for showing up today.</p>
    {% if habits|selectattr('timed')|list and not running %}
    <hr>
    <form class="row" method="post" action="/habits/start-form">
      <label>Start a timer for
        <select name="slug">{% for h in habits if h.timed %}<option value="{{ h.activity.slug }}">{{ h.activity.icon }} {{ h.activity.title }}</option>{% endfor %}</select>
      </label>
      <button>▶ Start</button>
    </form>
    <p class="hint">Stop it when you're done and the minutes are written for you. Leave the page; it keeps running.</p>
    {% endif %}
    {% else %}
    <p class="hint">Add a habit first.</p>
    {% endif %}
  </div>
</section>

<details class="card fold">
  <summary>＋ New habit</summary>
  <form class="row" method="post" action="/habits/add">
    <label>Name <input name="title" placeholder="Guitar practice" required maxlength="40"></label>
    <label>Icon <input name="icon" placeholder="🎸" maxlength="8" class="f-ico"></label>
    <label>Rhythm
      <select name="cadence">
        <option value="daily">every day</option>
        <option value="weekly_n" selected>N days a week</option>
        <option value="every_n_days">at most N days apart</option>
        <option value="none">no streak — just count it</option>
      </select></label>
    <label>N <input type="number" name="target_n" min="0" value="3" class="f-tgt"></label>
    <label>XP per log <input type="number" name="xp" min="0" value="5" class="f-xp"></label>
    <label class="check"><input type="checkbox" name="timed" value="1"> timed (minutes matter — practice, a walk, a sit)</label>
    <button class="primary">Add</button>
  </form>
  <p class="hint">This is the short form. Colour, matcher and sort order are in <a href="/settings#activities">Settings → Activities</a> — a habit is an activity with a log button, so everything there applies. Want another app to fill it in? Add a <a href="/settings#habits">calendar feed</a>.
    Bike day on Mon/Wed/Fri? Give it <a href="/settings#standing-days">standing days</a>.</p>
</details>


<section class="card">
  <h3>Recent <a class="more" href="/timeline">timeline →</a></h3>
  {% if recent %}
  <ul class="events compact">
    {% for r in recent %}
    <li class="ev {{ 'voided' if r.voided_at }}">
      <span class="ev-ico">{{ r.icon or '🎯' }}</span>
      <div class="ev-body"><div class="ev-head"><b>{{ r.title or r.slug }}</b>
        {% if r.duration_seconds %}<span class="badge">{{ r.duration_seconds|dur }}</span>{% endif %}
        {% if r.source != 'manual' %}<span class="badge actor">{{ {'ical': 'calendar feed', 'file': 'calendar file', 'timer': 'timer', 'api': 'api'}.get(r.source, r.source) }}</span>{% endif %}
        {% if r.xp %}<span class="xp">+{{ r.xp }} xp</span>{% endif %}
        {% if r.voided_at %}<span class="badge late">struck — entry changed</span>{% endif %}
        {% if r.note %}<span class="hint">“{{ r.note }}”</span>{% endif %}</div>
        {% if r.started_at and r.duration_seconds %}<div class="ev-detail">{{ r.started_at|local('%H:%M') }} → {{ r.ts|local('%H:%M') }}</div>{% endif %}
      </div>
      <time title="{{ r.ts|local('%Y-%m-%d %H:%M') }}">{{ r.ts|rel(now) }}</time>
    </li>
    {% endfor %}
  </ul>
  {% else %}<p class="hint">Nothing logged yet.</p>{% endif %}
</section>

{% if egress %}<p class="hint">🌐 This module can reach the network — only to fetch the calendar feeds you add, only on the schedule you set. Nothing configured, nothing fetched. <a href="/guide/privacy">How that is shown →</a></p>{% endif %}
{% endblock %}
{% block scripts %}<script src="/static/habits.js"></script>{% endblock %}